<template>
  <div class="result">

    <van-nav-bar :title="$route.query.keywords + ' 的搜索结果'" />

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item,index in list" @click="$router.push( { path: '/article', query: { id: item.art_id.toString() } } )" :key="index" :title="item.title" />
    </van-list>
  </div>
</template>

<script>
import { searchArticle } from '@/api/article'
export default {
  data() {
    return {
      loading: false,
      finished: false,
      // 保存搜索结果数据的数组
      list: [],
      page: 1
    };
  },

  methods: {

    async onLoad () {

      // 上拉加载数据
      let res = await searchArticle({
        page: this.page,
        per_page: 10,
        q: this.$route.query.keywords
      } )

      // 查到结果后让页码+1，那样下次来就是查下一页的数据
      this.page++
      
      this.list.push(...res.data.data.results)

      this.loading = false

      // 如果加载完了，要把finished改为true
      // 当前我页面的结果数据都已经大于或等于服务器上存的总数据了就代表加载完了
      if (this.list.length >= res.data.data.total_count) {
        this.finished = true
      }
    }
  }
};
</script>

<style>
</style>